import styled from 'styled-components'
import { Modal } from '@kedacom/react-next'

const StyledAddress = styled.div`
	&.address-wrap {
		input[type='password']::-ms-reveal,
		input[type='password']::-ms-clear {
			display: none;
		}
		margin-top: 40px;
		font-size: 12px !important;
		.form {
			padding-left: 0px;
		}
		.bind-address {
			height: 24px;
			align-items: center;
			margin-bottom: 0px;
			.bind-text {
				top: -22px;
				height: 24px;
				margin-bottom: 10px;
			}
		}
		.bind-text {
			top: -24px;
			height: 24px;
			margin-bottom: 10px;
		}
		.bind-other-address {
			height: 24px;
			top: -16px;
			align-items: center;
		}
		.bind-other-text {
			top: -60px;
			height: 24px;
			margin-bottom: 10px;
		}
		.address-function {
			width: 594px;
			height: 24px;
			margin-bottom: 16px;
		}
		.address-button {
			float: right;
			margin-left: 10px;
		}
		.address-form-text {
			display: flex;
			align-items: center;
			-webkit-box-align: center;
			// top: -4px;
			height: 24px;
			margin-bottom: 0px;
			margin-right: 24px;
		}
		.address-form-text-ip {
			width: 160px;
			.kd-form-item-label {
				width: 48px !important;
				padding-right: 0px !important;
			}
			.address-form-span {
				width: 113px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.address-form-text-mac {
			width: 260px;
			.kd-form-item-label {
				width: 70px !important;
				padding-right: 0px !important;
			}
		}
		.kd-form-item-label {
			align-items: center;
		}
		.kd-tag {
			display: flex;
			align-items: center;
		}
	}
`
const StyledModal = styled(Modal)`
	.modal-text {
		padding-left: 30px;
	}
	.address-check-box-text {
		margin: 20px 20px 0 20px;
	}
	.modal-form {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		align-items: center;
		display: flex;
	}
	.bind-group-text {
		top: 12px;
	}
	.address-group-form-text {
		align-items: center;
		margin-bottom: 5px;
		.kd-form-item-label {
			width: 70px !important;
		}
		margin-right: 30px;
		.address-group-form-span {
			width: 130px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.address-check-box {
		padding: 20px;
	}
	.address-form {
	}
`
export { StyledAddress, StyledModal }
